﻿@page "/speechs"
@namespace BootstrapBlazor.Shared.Samples
@inherits SpeechBase
@layout MainLayout

<h3>Speech 语音识别与合成</h3>

<h4>通过麦克风语音采集转换为文字（STT），或者通过文字通过语音朗读出来（TTS）</h4>

<RadioList Items="@SpeechItems" Value="@SpeechItem" OnValueChanged="OnSpeechProviderChanged" class="my-3" />

<p>本组件依赖于 <a href="https://www.nuget.org/packages?q=@NugetPackageName" target="_blank"><code>@NugetPackageName</code></a>，使用本组件时需要引用其组件包</p>

<p><b>Nuget 包安装</b></p>

<p>使用 <a href="https://www.nuget.org/packages?q=@NugetPackageName" target="_blank">nuget.org</a> 进行 <code>@NugetPackageName</code> 组件的安装</p>

<div class="code-label">.NET CLI</div>
<Pre class="no-highlight">dotnet add package @NugetPackageName --version @Version</Pre>

<div class="code-label">PackageReference</div>
<Pre class="no-highlight">&lt;PackageReference Include="@NugetPackageName" Version="@Version" /&gt;</Pre>

<div class="code-label">Package Manager</div>
<Pre class="no-highlight">Install-Package @NugetPackageName -Version @Version</Pre>

<div class="code-label mb-2">实战体验</div>

<ul class="ul-demo">
    <li>点击 <b>开始</b> 按钮后，对着电脑说：<b><i>“请帮我把灯打开”</i></b></li>
    <li>电脑接收到指令后，会询问 <b><i>“您确认要把灯打开吗？请您确认！”</i></b></li>
    <li>您对着电脑说：<b><i>“确认”</i></b></li>
    <li>电脑执行指令，在下方文本框内输入 <b>已经为您打开</b> 文本</li>
</ul>

<div class="row">
    <div class="col-12 col-sm-auto">
        <Button Text="开始体验" Icon="fa fa-fw fa-microphone" OnClick="OnStart" style="margin: 1.5rem 0;" />
    </div>
    <div class="col-12 col-sm-auto">
        <SpeechWave Show="Show" class="my-3" />
    </div>
</div>

<GroupBox Title="指令输出区">
    <BootstrapBlazor.Components.Console HeaderText="指令面板" Items="@ConsoleMessages" Height="140" />
</GroupBox>

<div class="code-label mt-3 mb-2">1. 注册服务</div>

<div class="mb-2"><b>Program.cs</b></div>

<Pre>// 增加 Azure 语音服务
<b><i>builder.Services.AddBootstrapBlazorAzureSpeech();</i></b>

// 增加 Baidu 语音服务
<b><i>builder.Services.AddBootstrapBlazorBaiduSpeech();</i></b></Pre>

<div class="code-label mb-2">2. 使用服务</div>

<Pre>// 语音识别服务
[Inject]
[NotNull]
private RecognizerService? RecognizerService { get; set; }

// 语音合成服务
[Inject]
[NotNull]
private SynthesizerService? SynthesizerService { get; set; }</Pre>
